<template>
  <view class="tuanList">
    <view
      class="tuanBox boxPanel"
      v-for="(item, index) in tuanList"
      :key="index"
      @click="goDetail(item)"
    >
      <view class="font-32 font-weight-5 m-b-10" style="line-height: 1.4"
        >{{ item.goods_name }}
      </view>
      <view class="flex-y-center">
        <view
          class="nums"
          :style="{
            backgroundImage: 'url(' + $util.img('image/sanqi/tuan_1.png') + ')',
          }"
          >{{ item.pintuan_num }}人团</view
        >
        <view class="limit radius-10 m-l-14"
          >限购 {{ item.buy_num }} {{ item.unit }}</view
        >
      </view>
      <view class="pics">
        <image
          :src="$util.img(img)"
          mode=""
          lazy-load
          v-for="(img, i) in item.goods_image"
          :key="i"
        ></image>
      </view>
      <view class="graybox flex-x-between">
        <view class="flex rel" style="align-items: baseline">
          <view class="sheng">已省{{ item.save_price }}元</view>
          <text class="font-36 c-origin text-bold"
            >¥{{ item.pintuan_price }}</text
          >
          <text class="font-24 c-9c yprice">单价买:¥{{ item.price }}</text>
        </view>
        <view class="font-24 c-base buy">马上抢</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "tuanGoods",
  props: {
    tuanList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    goDetail(item) {
      this.$util.redirectTo("/otherpages/mall/tuanDetail", {
        pintuan_id: item.pintuan_id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tuanBox {
  .nums {
    width: 144rpx;
    height: 36rpx;
    font-size: 24rpx;
    color: #ff3a45;
    // padding-left: 40rpx;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    text-align: right;
    padding-right: 20rpx;
  }
  .limit {
    font-size: 20rpx;
    color: $color-title2;
    padding: 2rpx 10rpx;
    border: 1px solid $color-title2;
    display: inline-block;
  }
  .pics {
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
    margin: 24rpx 0;
    image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 20rpx;
      margin-right: 20rpx;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .graybox {
    border-radius: 20rpx;
    background-color: #f7f7f7;
    padding: 40rpx 34rpx 14rpx;
    .yprice {
      //   text-decoration: line-through;
      margin-left: 10rpx;
    }
    .sheng {
      position: absolute;
      left: 0;
      bottom: 60rpx;
      width: 130rpx;
      //   height: 27rpx;
      border-radius: 20rpx 20rpx 20rpx 0;
      background: #fc2743;
      color: #fff;
      font-size: 20rpx;
      text-align: center;
      padding: 0 10rpx;
    }
    .buy {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 133rpx;
      height: 55rpx;
      background: linear-gradient(90deg, #fa4147 0%, #fe6625 100%);
      border-radius: 60rpx;
    }
  }
}
</style>
